<template>
  <div class='paper-dialog'>
    <el-dialog title="多级通知规则" class="m_dialog" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="form" :model="formData" :rules="rules" label-width="160px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="通知规则名称:" prop="noticeRuleName">
              <el-input v-model="formData.noticeRuleName" />
            </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="启用状态:" prop="enableStatus">
              <el-select v-model="formData.enableStatus">
                <el-option v-for="dict in dict.type.alarm_relus_enable_status" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="通知规则描述:" prop="noticeRuleDescribe">
          <el-input type="textarea" :rows="3" placeholder="请输入描述" v-model="formData.noticeRuleDescribe" />
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input type="textarea" :rows="3" placeholder="请输入描述" v-model="formData.remark" />
        </el-form-item>
        <el-form-item label="通知开始值:" prop="startLabelId">
          <el-select v-model="formData.startLabelId">
            <el-option v-for="tag in tagOptions" :key="tag.value" :label="tag.label" :value="tag.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知结束值:" prop="endLabelId">
          <el-select v-model="formData.endLabelId">
            <el-option v-for="tag in tagOptions" :key="tag.value" :label="tag.label" :value="tag.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间（单位分钟）:" prop="timeValue">
          <el-input v-model="formData.timeValue" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
        <el-button @click="submitForm" type="primary" class="btn_primary">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateNoticeRule, addNoticeRule, getLabelList } from '@/api'
export default {
  dicts: ['alarm_relus_enable_status'],
  data () {
    return {
      dialogVisible: false,
      // 资料数据
      formData: {},
      // 表单验证规则
      rules: {
        //  taskContent: undefined,
        // taskLine: undefined,
        // taskName: undefined,
        // taskNum: undefined,
        // taskRequire: undefined,
        noticeRuleName: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
        startLevel: [{ required: true, message: '请选择开始值', trigger: 'change' },],
        endLevel: [{ required: true, message: '请选择结束值', trigger: 'change' }],
      },
      tagOptions: []
    };
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {

  },
  methods: {
    show (data) {
      this.dialogVisible = true
      this.resetForm()
      console.log(data)
      if (data !== undefined && typeof data === 'object') {
        this.$nextTick(() => {
          this.formData = JSON.parse(JSON.stringify(data))
        })
      }
      this.getTagOptions(data)
    },
    // 清空formData 
    resetForm () {
      this.formData = {
        enableStatus: undefined,
        endLabelId: undefined,
        noticeRuleDescribe: undefined,
        noticeRuleName: undefined,
        remark: undefined,
        planNum: undefined,
        startLabelId: undefined,
        remark: undefined,
        ruleDescribe: undefined,
        timeValue: undefined
      }
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    // 提交Form表单
    async submitForm () {
      try {
        const isAddOperation = this.formData.alarmNoticeRuleId === undefined
        const method = isAddOperation ? addNoticeRule : updateNoticeRule
        const message = isAddOperation ? '新增成功' : '修改成功'
        const response = await method(this.formData)
        if (response.code === 200) {
          this.dialogVisible = false
          this.$message.success(message)
          this.$emit('replace')
        }
      }
      catch (error) {
        this.$emit('replace')
      }
    },
    fileChange (file) {
    },
    planProjectSelect (rows) {
      this.formData.inspectionProjectIds = rows.map(item => item.inspectionProjectId)
    },
    async getTagOptions (data) {
      const params = {
        deptId: data
      }
      const response = await getLabelList(params)
      if (response.code === 200) {
        const tagData = response.rows.map(item => {
          return {
            value: item.labelId,
            label: item.labelName
          }
        })
        this.$set(this, 'tagOptions', tagData)
        console.log(this.tagOptions)

      }
    }
  },
  components: {
  }
}
</script>

<style lang='less' scoped>
</style>